<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签</title>
    <style>
        body {
            background: url(img/大背景.jpg) top;
        }
        .nav {
            position:fixed;
            right: 0;
            top: auto;
            margin: 100px auto;
        }
    </style>
</head>

<audio class="nav" src="mp3/菊池俊輔 - ドラえも～ん！ (哆啦A~梦！).mp3" controls>背景音乐</audio>

vscode缩进快捷键：<br>
选中文本；
Ctrl + [ 和 Ctrl + ] 实现文本的向左移动或者向右移动；<br>
vscode代码对齐快捷键：<br>
选中文本；
Shift + Alt + F 实现代码的对齐； <br>
<strong>加粗 strong</strong>
<br>
<b>加粗 b</b>
<br>
<em>斜体 em</em>
<br>
<i>斜体 i</i>
<br>
<del>删除线 del</del>
<br>
<s>删除线 s</s>
<br>
<ins>下划线 ins</ins>
<br>
<u>下划线 u</u>
<div>div标签，独占一行 </div>
<span>span标签，一行可以放多个</span>
<span>span示例1</span>
<span>span示例2</span>
<span>span示例3</span>
<span>span示例4</span>
<span>span示例5</span>
<br>
<h4>图片标签的使用 img src=“图片URL”</h4>
单词image的缩写，意为图像。<br />
src是 &lt; img &gt;标签的必须属性，它用于指定文件的路径和文件名。<br />
<img src="img/图片示例.jpg" />
<h4>alt 替换文本，图像显示不出来时候用文字替换</h4>
<img src="img/图片示.jpg" alt="对不能显示的图片进行说明" />
<h4>title 提示文本，鼠标放到图片上，提醒的文字</h4>
<img src="img/图片示例.jpg" alt="对不能显示的图片进行说明" title="图片说明" />
<h4>width 给图像设定宽度 只修改了宽度，高度自动等比例修改</h4>
<img src="img/图片示例.jpg" alt="对不能显示的图片进行说明" title="图片说明" width="500" />
<h4>width 给图像设定高度 宽高都修改</h4>
<img src="img/图片示例.jpg" alt="对不能显示的图片进行说明" title="图片说明" width="500" height="100" />
<h4>border 给图像设定边框</h4>
<img src="img/图片示例.jpg" alt="对不能显示的图片进行说明" title="图片说明" width="500" border="15" />
<br>
<h4>图片路径</h4>
页面中图片多，建议新建文件夹存放图片（images），这时再查找，就采用“路径”的方式指定图像文件位置。<br>
路径分为：绝对路径；相对路径。<br>
<p>相对路径：以引用文件所在位置为参考基础而建立的目录途径</p>
简单讲，图片相对于HTML页面的位置<br>
<img src="img/图片路径.png" width="500">
<p>绝对路径：指目录下的绝对位置，直接访问。</p>
例如：“D：\web\img\logo.gif”或者完整的网页地址“http://www.****.com/logo.gif”。
<h4>1、外部链接（默认当前页面打开） a href="http://www.qq.com"</h4>
target 打开窗口的方式 默认值是 _self 为当前窗口打开 _blank 为新建窗口打开 <br>
<a href="http://www.qq.com"> 腾讯</a>
<br>
<h4>2、外部链接-当前页面打开 a href="http://www.qq.com" target="_self"</h4>
<a href="http://www.qq.com" target="_self"> 腾讯</a>
<br>
<h4>3、外部链接-新建页面打开 a href="http://www.qq.com" target="_blank"</h4>
<a href="http://www.qq.com" target="_blank"> 腾讯</a>
<br>
<h4>4、 内部链接 a href="demo.html" target="_blank"</h4>
<a href="demo.html" target="_blank"> 连接实验</a>
<br>
<h4>5、空连接：a href="#"</h4>
<a href="#"> 空连接实验</a>
<br>
<h4>6、下载链接：地址链接是 文件、.exe 或者是 zip 等压缩包形式 a href="img/图片示例.zip" </h4>
<a href="img/图片示例.zip"> 下载文件</a>
<br>
<h4>7、网页元素的链接</h4>
<a href="http:\\www.baidu.com"><img src="img/图片示例.jpg"></a>
<br>
<h4>8、锚点链接</h4>
<a href="maodianlianjie.html" target=_blank>锚点链接示例</a>
<br>
<h4>注释标签</h4>
&lt; ！--注释部分--&gcy; 快捷键 ：ctrl+/
<br>
<h4>特殊字符</h4>
空格符 & n b s p ；<br>
＜ 小于号 & l t ；<br>
＞ 大于号 & g t ；
等
<br>
<h3>表格</h3>
<img src="img/表格.png" width="500"><br>
<a href="table.html" target="_blank">表格详情</a>
<br>
<h4>合并单元格</h4>
<br>
跨行合并：rowspan=“合并单元格个数”。合并中最上侧单元格为目标单元格
<br>
跨列合并：colspan=“合并单元格个数”。合并中最左侧单元格为目标单元格
<br>
步骤：1.确定跨行还是跨列；2.找到目标单元格，写上合并方式=合并单元格数量。比如： ＜tdcolspan="2"＞＜/td＞；3.删除多余单元格。
<br>
<a href="MergeTable.html" target="_blank">
    <h4>合并示例</h4>
</a>
<br>
<h3>列表标签</h3>
<br>
<h4>无序列表</h4>
<br>
标签内的无序列表，一般会以项目符号呈现列表，而列表项使用＜li＞标签定义
<br>
无序列表的基本语法格式如下：
<br>
＜ul＞
<br>
&nbsp;&nbsp;＜li＞列表项1＜/li＞
<br>
&nbsp;&nbsp;＜li＞列表项2＜/li＞
<br>
&nbsp;&nbsp;＜li＞列表项3＜/li＞
<br>
&nbsp;&nbsp; ...
<br>
＜/ul＞
<a href="UnorderedList.html" target="_blank">
    <h4>无序列表示例</h4>
</a>
<br>
1.无序列表各个列表项无顺序之分，并列存在
<br>
2.＜ul＞＜/ul＞中间只能嵌套＜li＞＜/li＞，＜ul＞与＜/ul＞之间不提倡直接输入文字或添加其他标签
<br>
3.＜li＞与＜/li＞之间相当容器，可以放置各类标签与文字等一切元素
<br>
4.无序列表会带有自身样式的属性，在实际应用时，会使用CSS进行设置
<br>
<h4>有序列表</h4>
<br>
有序列表即为有序排列的列表，其余各个列表会按照一定顺序排列定义。
<br>
在HTML标签中，＜ol＞表亲啊用于定义有序列表，列表排序以数字来显示，并且使用＜li＞标签定义列表
<br>
有序列表基本语法格式如下
<br>
＜ol＞
<br>
&nbsp;&nbsp;＜li＞列表项1＜/li＞
<br>
&nbsp;&nbsp;＜li＞列表项2＜/li＞
<br>
&nbsp;&nbsp;＜li＞列表项3＜/li＞
<br>
&nbsp;&nbsp; ...
<br>
＜/ol＞
<br>
1.＜ol＞＜/ol＞中间只能嵌套＜li＞＜/li＞，＜ol＞与＜/ol＞之间不提倡直接输入文字或添加其他标签
<br>
2.＜li＞与＜/li＞之间相当容器，可以放置各类标签与文字等一切元素
<br>
3.有序列表会带有自身样式的属性，在实际应用时，会使用CSS进行设置
<br>
<a href="Ordered List.html" target="_blank">有序列表示例</a>
<br>
<h4>自定义列表（重点）</h4>
<br>
自定义列表常用于对术语或名词解释和描述，定义列表的列表项前没有任何符号。
<br>
自定义列表基本语法如下
<br>
＜dl＞
<br>
&nbsp;&nbsp;＜dt＞名词1＜/dt＞
<br>
&nbsp;&nbsp;＜dd＞名词1解释1＜/dd＞
<br>
&nbsp;&nbsp;＜dd＞名词1解释2＜/dd＞
<br>
&nbsp;&nbsp; ...
<br>
＜/dl＞
<br>
1.＜dl＞＜/dt＞里面只能包含＜dt＞＜dd＞
<br>
2.＜dt＞和＜dd＞没有个数的限制，通常为一个＜dt＞对应多个＜dd＞
<br>
<a href="Definition List.html" target=blank>自定义列表示例</a>
<br>
<h3>表单标签</h3>
<br>
使用表单的目的是收集用户信息。
<br>
在HTML中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分构成。
<br>
表单域
<br>
表单域是一个包含表单元素的区域
<br>
在HTML标签中，＜form＞标签用于定义表单域，以实现用户信息的收集和传递。
<br>
＜form＞会把它范围内的表单信息提交给服务器
<br>
＜form action=“url地址” method=“提交方式” name=“表单域名称”＞
<br>
各种元素表单控件
<br>
＜/form＞
<br>
<h4>＜input＞表单元素</h4>
<br>
用于收集用户信息。＜input＞标签中包含type属性。＜input＞为单标签
<br>
<a href="input表单元素.html" target="bkank">input 示例</a>
<br>
name 和value是每个表单元素都有的属性值，主要给后台人员使用。
<br>
name表单元素的名字，要求单选按钮和复选框要有相同的name的值
<br>
<h4>＜label＞标签</h4>
<br>
＜label＞标签为input元素定义标注
<br>
＜label＞标签用于绑定一个表单元素，当点击＜label＞标签内文本，浏览器自动将光标转到或选择对应的表单元素上，用来增加用户体验
<br>
语法：
<br>＜label for=“sex”＞男＜/label＞
<br>＜input type=“radio” name=“sex” id=“sex”/＞
<br>核心：＜label＞标签的for属性应当与相关元素的id属性相同
<br>
<a href="input表单元素.html" target="bkank">示例</a>
<br>
<h4>select下拉表单元素</h4>
</h4>
下拉列表，节约空间
</h4>
语法：
＜select＞<br>
&nbsp;&nbsp;＜option＞选项1＜/option＞<br>
&nbsp;&nbsp;＜option＞选项2＜/option＞<br>
&nbsp;&nbsp;＜option＞选项3＜/option＞<br>
&nbsp;&nbsp;...<br>
＜/select＞<br>
<a href="select.html" target="blank">下拉列表示例</a><br>
1.select中至少包含一对option。<br>
2.在option中定义selected=“selected”时，选项为默认值<br>
<h4>&lt;textarea&gt;表单元素</h4><br>
用户输入文本较多，定义多行文本输入，常见于留言板、评论。<br>
语法：
&lt;textarea rows=“3” cols=“20”&gt;<br>
&nbsp;文本内容<br>
&lt;/text area&gt;<br>
1.通过text area标签可以创建多行输入文本<br>
2.cols=“每行中的字符数”，rows=“显示的行数”。实际开发不用，后续使用css改变<br>
<a href="textarea.html" target="blank">示例</a><br>
<h4><a href="01-综合案例.html" target="blank">01-综合案例</a></h4><br>
<h3>参考读物</h3>
<a href="http://www.w3school.com.cn/" target="blank">http://www.w3cschool.com.cn/</a><br>
<a href="https://developer.mozilla.org/zh-CN/" target="blank">https://developer.mozilla.org/zh-CN/</a><br>
<h3>css语法规范</h3><br>
css样式规则：<br>
css规则有两个主要部分构成：选择器以及一条或以上声名<br>
<ul>
    <li>
        选择器是用于指定css样式的html标签，花括号内是对该对象设置的具体样式
    </li>
    <li>
        属性和属性值以“键值对”形式出现
    </li>
    <li>
        属性是对指定的对象设置的属性样式，例如字体大小、文本颜色等
    </li>
    <li>
        属性和属性值之间用英文“:”分开
    </li>
    <li>每组“键值对”之间用英文“;”进行区分
    </li>
</ul>
<a href="css.html" target="blank">css示例</a><br>
<h4>
    css语法规范代码风格
</h4><br>
建议展开格式<br>
小写<br>
属性值前，冒号后，保留一个空格<br>
选择器和花括号之间保留空格<br>
<h4>
    基础选择器
</h4><br>
由单个选择器和复合选择器两个大类<br>
<ul>
    <li>基础选择器由单个选择器组成</li>
    <li>基础选择器又包括标签选择器、类选择器、id选择器和通配符选择器</li>
</ul>
<h4>标签选择器</h4><br>
标签选择器（元素选择器）是指用html标签作为选择器，按标签名称分类，为页面中某一类标签指定统一的css样式<br>
语法：<br>
标签名{<br>
&nbsp;&nbsp;&nbsp 属性1：属性值1；<br>
&nbsp;&nbsp;&nbsp 属性2：属性值2；<br>
&nbsp;&nbsp;&nbsp 属性3：属性值3；<br>
&nbsp;&nbsp;&nbsp; ...<br>
}
<br>
<h4>作用</h4>
标签选择器可以把某一类标签全部选择出来，比如所有的 &lt;div&gt;标签或者所有的&lt;span&gt;标签；<br>
<h4>优点</h4>
能快速为页面中同类型的标签统一设置样式<br>
<h4>缺点</h4>
不能设计差异化样式，只能选择全部的当前标签。<br>
<a href="基础选择器之标签选择器.html" target="blank">基础选择器之标签选择器</a><br>

<h4>类选择器</h4>
差异化选择不同标签，单独选择一个或者几个<br>
语法：<br>
.类名 {<br>
&nbsp;&nbsp;&nbsp;&nbsp;属性1：属性值1；<br>
&nbsp;&nbsp;&nbsp;&nbsp;... <br>
}<br>
例如，将所有拥有red类的html元素均为红色<br>
.red{<br>
&nbsp;&nbsp;&nbsp;color：red；<br>
}<br>
结构需要<strong>class属性</strong>来调用class类的意思 <br>
&lt;div class=‘red’&gt;变红色&lt;/div&gt;<br>
<h4>注意</h4>
<ol>
    <li>类选择器使用“.”（英文点号）进行标识，后边紧跟类名（自定义，自己命名）</li>
    <li>可以理解为给这个标签起名字，来表示</li>
    <li>长名称或词组可以使用中横线来为选择器命名</li>
    <li>尽量使用英文字母表示命名</li>
    <li>命名要有意义，尽量是别人一眼看出类名目的</li>
    <li>仅以中文、英文、下划线、中文标点符号开头</li>
</ol>
<a href="基础选择器之类选择器.html" target="blank">基础选择器之类选择器</a><br>
<h4><a href="利用类选择器画三个盒子.html" target="blank">课堂案例</a></h4><br>
<ol>
    <li>类选择器的使用</li>
    <li>div就是一个盒子，用来装网页内容的</li>
</ol>
<h4><a href="多类名的使用方式.html" target="blank">类选择器—多类名</a></h4><br>
我们可以给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签。<br>
简单理解就是一个标签有多个名字。<br>
1.多类名使用方式<br>
&lt;div class=“red font20”&gt;亚瑟&lt;/div&gt;<br>
（1）在标签class属性中写多个类名<br>
（2）多个类名中间必须用空格分开<br>
2.开发中的场景<br>
（1）可以把一些标签元素相同的样式（共同部分）放到一个类里面。<br>
（2）这些标签都可以调用这个公共的类，然后调用自己独有的类<br>
（3）节省CSS代码，统一修改也非常方便<br>
<a href="基础选择器之id选择器.html" target="blank">
    <h4>id选择器</h4>
</a>
id选择器可以为标有特定id的html元素指定特定的样式。<br>
html元素以id属性来设置id选择器，CSS中id选择器以“#”定义<br>
语法：<br>
#id名 {<br>
&nbsp;&nbsp;&nbsp;属性1：属性值1；<br>
&nbsp;&nbsp;&nbsp;... <br>
} <br>
例如，将id为nav元素中的内容设置为红色。 <br>
#nav { <br>
color：red；<br>
} <br>
id选择器和类选择器的区别<br>
1.类选择器（class）好比一个人名，一个人可以有多个名字，同时一个名字可以多人使用<br>
2.id选择器好比人的身份证号，具有唯一性，不得重复<br>
3.id选择器和类选择器最大的不同在于使用次数上<br>
4.类选择器在修改样式中使用的最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用<br>
<a href="通配符选择器.html" target="blank">
    <h4>通配符选择器</h4>
</a>
在CSS中，通配符选择器使用“*”定义，他表示选取页面中所有元素（标签）<br>
语法：<br>
* {<br>
&nbsp;&nbsp;&nbsp;&nbsp;属性1：属性值1；<br>
&nbsp;&nbsp;&nbsp;&nbsp;... <br>
} <br>
通配符选择器不需要调用，自动修改样式<br>
特殊情况下才使用，后边讲解使用场景（以下是清除所有元素标签的内外边距，后期讲）<br>
* {<br>
&nbsp;&nbsp;&nbsp;&nbsp;margin：0 <br>
&nbsp;&nbsp;&nbsp;&nbsp;padding：0 <br>
} <br>
<h3>Css字体属性</h3>
<a href="CSS字体属性之字体系列.html" target="blank">
    <h4>字体系列</h4>
</a>
CSS使用font-family属性定义文本的字体系列。<br>
p font-famliy：“微软雅黑”；<br>
div{font-famliy：Arial，“Microsoft Yahei”，“微软雅黑”；} <br>
各个字体间必须使用英文状态下的逗号隔开<br>
一般情况下，如果有空格隔开多个单词组成的字体加引号<br>
尽量使用系统默认自带字体，保证任何用户都能正常显示<br>
多个字体排序，系统从第一个选，直到系统包含，否则以浏览器默认显示<br>
<a href="字体大小.html" target="blank">
    <h4>字体大小</h4>
</a>
CSS使用font-size属性定义字体大小。<br>
p { <br>
&nbsp;&nbsp;&nbsp;font-size：20px <br>
} <br>
px（像素）大小是我们网页的最常用单位<br>
谷歌浏览器的默认文字大小为16px <br>
不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小<br>
可以给body指定整个页面文字大小<br>
<a href="字体粗细.html" target="blank">
    <h4>字体粗细</h4>
</a>
CSS使用font-weight属性设置文本字体的粗细。<br>
p{ <br>
&nbsp;&nbsp;&nbsp;font-weight: bold;<br>
} <br>
<table width=500 border="1" cellspacing="0">
    <tr>
        <td><b> 属性值</b></td>
        <td><b> 描述</b></td>
    </tr>
    <tr>
        <td>normal</td>
        <td>默认值（不加粗的）</td>
    </tr>
    <tr>
        <td>bold</td>
        <td>定义粗体（加粗的）</td>
    </tr>
    <tr>
        <td>100-900</td>
        <td>400等价于normal，700等价于bold，此数字后不加单位</td>
    </tr>
</table>
学会让加粗标签（比如h和strong等）不加粗，或者其他标签加粗<br>
实际开发中，更提倡数字表示粗细<br>
<a href="文字样式.html" target="blank">
    <h4>文字样式</h4>
</a>
CSS使用font-style属性设置文本风格<br>
p{ <br>
&nbsp;&nbsp;&nbsp;font-style：normal；<br>
} <br>
<table width=500 border="1" cellspacing="0">
    <tr>
        <td><b> 属性值</b></td>
        <td><b> 作用</b></td>
    </tr>
    <tr>
        <td>normal</td>
        <td>默认值浏览器会显示标准字体样式 font-style：normal；</td>
    </tr>
    <tr>
        <td>italic</td>
        <td>浏览器显示斜体字体样式</td>
    </tr>
</table>
<b>注意：</b>平时很少给文本加斜体，反而使用斜体标签em/i改为非斜体<br>
<a href="字体复合属性.html" target="blank">
    <h4>字体复合属性</h4>
</a>
字体复合属性可以把以上文字样式综合，节约代码<br>
body{ <br>
&nbsp;&nbsp;&nbsp;font：font-style &nbsp;font-weight &nbsp;font-size/line-height &nbsp;font-family；<br>
} <br>
使用font属性时，必须按照上边语法顺序，并且各个属性之间用空格隔开<br>
不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用<br>
<h3>CSS文本属性</h3>
CSS Text（文本）属性可以定义文本的外观，比如颜色、对齐方式、装饰文本、文本缩进、行间距等。<br>
<h4>文本颜色</h4>
color属性用于定义文本颜色。<br>
div { <br>
&nbsp;&nbsp;&nbsp;color：red；<br>
} <br>
1.颜色名称（英文）<br>
2.十六进制#FF0000 <br>
3.rgb代码：rgb（255，0，0）或rgb（100%，0%，0%）<br>
开发中十六进制最常用<br>
<h4>文本对齐</h4>
text-align属性用于设置元素内文本内容的水平对齐方式<br>
div { <br>
&nbsp;&nbsp;&nbsp;text-align：center/right/left（默认）；<br>
} <br>
<h4>装饰文本</h4>
text-decoration属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等<br>
div { <br>
&nbsp;&nbsp;&nbsp; text-decoration：underline；<br>
} <br>
<!-- width是宽、border是最外边边框的粗细、cellspacing是每个小框框之间的间隔 -->
<table width=500 border="1" cellspacing="0">
    <tr>
        <td>属性值</td>
        <td>描述</td>
    </tr>
    <tr>
        <td>none</td>
        <td>默认，没有装饰线（最常用）</td>
    </tr>
    <tr>
        <td>underline</td>
        <td>下划线，链接a自带下划线（常用）</td>
    </tr>
    <tr>
        <td>overline</td>
        <td>上划线（几乎不用）</td>
    </tr>
    <tr>
        <td>line-through</td>
        <td>删除线（不常用）</td>
    </tr>
</table>
去掉链接的下划线方法：<br>
&lt;style&gt; <br>
&nbsp;&nbsp;&nbsp; a { <br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-decoration: none; <br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} <br>
&lt;/style&gt; <br>
&lt;a href="#"&gt;链接&lt;/a&gt; <br>
<a href="文本缩进.html" target="blank">
    <h4>文本缩进</h4>
</a>
text-indent属性是用来指定文本的第一行缩进，通常是将段落首行缩进。<br>
&nbsp;div&nbsp;{ <br>
&nbsp;&nbsp;&nbsp;text-indent：10px；<br>
&nbsp;} <br>
通过设置该属性，元素第一行可以缩进一个给定长度，甚至为负数<br>
&nbsp;p&nbsp;{ <br>
&nbsp;&nbsp;&nbsp;text-indent：2em；<br>
&nbsp;} <br>
em是一个相对单位，相当于当前元素文字大小的一个文字。<br>
<h4>行间距</h4>
line-height属性用于设置行间距（行高）。可以控制文字的行与行间距。<br>
&nbsp;p&nbsp;{ <br>
&nbsp;&nbsp;&nbsp;line-height：26px；<br>
&nbsp;} <br>
行间距由上间距、文字高度、下间距构成。<br>
上下间距加行高为行间距。<br>
<h3>CSS引入方式</h3>
<h4>CSS的三种样式表</h4>
按照CSS样式书写的位置（或引入的方式），CSS样式表可以分为三大类：<br>
1.行内样式表（行内式）<br>
2.内部样式表（嵌入式）<br>
3.外部样式表（链接式）<br>
<h4>内部样式表</h4>
内部样式表（内嵌样式表）是写到html页面内部，将所有CSS代码抽取出来，单独放到一个&lt;style&gt;标签中<br>
&nbsp;&lt;style&gt;<br>
&nbsp;&nbsp;&nbsp;div&nbsp;{ <br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color：red；<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size：12px；<br>
&nbsp;&nbsp;&nbsp; } <br>
&nbsp;&lt;/style&gt;<br>
&lt;style&gt;标签理论上可以放在html文档的任何一个地方，但一般会放在&lt;head&gt;标签中<br>
通过此种方式，可以方便控制当前整个页面中 元素样式设置<br>
代码结构清晰，但是并没有实现结构与样式完全分离<br>
<h4>行内样式表</h4>
行内样式表（内嵌样式表）是在元素标签内部的style属性中设定CSS样式，适合修改简单样式<br>
&lt;div style=“color：red； font-size：12px；”&gt;需要修改的地方&lt;/div&gt;<br>
style其实就是标签的属性<br>
在双引号中间，写法要符合CSS规范<br>
可以控制当前的标签设置样式<br>
由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式时候，可以考虑使用<br>
使用行内样式表设定CSS，通常也被称为行内式引入<br>
<a href="css外部样式表.html" target="blank">
    <h4>外部样式表</h4>
</a>
实际开发都是外部样式表，适合于样式比较多的情况，核心是：样式单独写到CSS文件中，之后把CSS文件引入到html页面中使用<br>
引入外部样式表分为两步：<br>
1.新建一个后缀名为.css的样式文件，把所有CSS代码都放到此文件中<br>
2.在html页面中，head标签内使用&lt;link rel=“stylesheet” href=“css文件路径”&gt;<br>
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件<br>
href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径<br>
使用外部样式表设定CSS，通常也被称为外链式或链接式引入，这种方式是开发中常用的方式<br>
<h4>
    <a href="02-综合案例.html" target="blank">02-综合案例</a>
</h4>
<h3>chrome调试工具</h3>
<h4>1.打开调试工具</h4>
打开chrome浏览器，按下F12键或者右击页面空白处→检查。
<h4>2.使用调试工具</h4>
<ol>
    <li>ctrl＋滚轮可以放大开发者工具代码大小</li>
    <li>左边是html元素结构，右边是css样式</li>
    <li>右边css样式可以改动数值（左右箭头或是直接输入）和查看颜色</li>
    <li>ctrl+0复原浏览器大小</li>
    <li>如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误</li>
    <li>如果有样式，但是样式前有黄色感叹号，则样式属性书写错误</li>
</ol>
<h4>Emmet语法</h4>
Emmet语法的前身是Zen coding，它使用缩写，来提高html/css的编写速度，Vscode内部已经集成改语法<br>
<h5>1.快速生成html结构语法</h5>
a.生成标签，直接输入标签名按tab键即可 <br>
b.若想生成多个相同标签，加上*。比如 div*3 就可以快速生成3个div <br>
c.若有父子级关系，可以用> 比如ul>li就可以<br>
d.若有兄弟关系的标签，可以用+ 比如div+p <br>
e.若生成带有类名或者id名字的，直接写.demo或者#two <br>
f.若生成的div类名是有顺序的，可以用自增符号$ <br>
g.若想在生成标签内部写内容可以用（）表示
<h5>2.快速生成CSS样式语法<br></h5>
<p>CSS基本采取简写样式即可</p>
a.比如w200 按tab 可以生成 width：200px；<br>
b.比如 lh26 按tab 可以生成 line-height：26px；<br>
<h5>快速格式化代码</h5>
Vscode 快速格式化代码：shift+alt+f
<h6 style="font-size:13px;">也可以设置当我们保存页面时候自动格式化代码：</h6>
1）文件--->【首选项】--->【设置】<br>
2）搜索emmet.include；<br>
3）在setting.json下的【用户】中添加以下语句：<br>
“editor.formatOnType”：true，<br>
“editor.formatOnSave”：true，<br>
只需设置一次即可
<h4>CSS复合选择器</h4>
<p>在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的</p>
复合选择器更准确、更高效的选择目标元素（标签）<br>
复合选择器由两个或者多个基础选择器，通过不同的方式组合而成的<br>
常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等<br>
<h4>后代选择器</h4>
<p>后代选择器又称为包含选择器，可以选择父元素里的子元素，其写法就是把外层标签写在前面，内层标签写后面，中间用空格分隔。当标签发生嵌套时，内层标签成为外层标签的后代。
    <b>元素1 元素2</b>
</p>

ol和ul同时存在时选择其中一个li标签时，在style中语法是：<br>
&nbsp; ol li{ <br>
&nbsp;&nbsp;&nbsp;color：red；<br>
&nbsp;&nbsp;} <br>
<p>元素1与元素2之间用空格隔开</p>
<p>元素1是父级，元素2是子级，最终选择是元素2</p>
<p>元素2可以是儿子，也可以是孙子，只要是元素1的后代</p>
<p>元素1与元素2可以是任意基础选择器</p>
<a href="子元素选择器.html" target="blank">
    <h4>子选择器</h4>
</a>
子选择器只能选择作为某元素最近一级的子元素，简单理解为亲儿子<br>
语法：<br>
&nbsp;元素1&gt;元素2{样式声名} <br>
<p>元素1和元素2用大于号隔开</p>
<p>元素1是父级，元素2是子级，最终选择是元素2</p>
<p>元素2必须是亲儿子，其孙子、重孙直接不可用</p>
<p>儿子可以和孙子使用，孙子可以和重孙使用</p>
<a href="并集选择器.html" target="_blank">
    <h4>并集选择器</h4>
</a>
<p>并集选择器可以选择多组标签，同时为他们定义相同样式。通常用于集体声明</p>
<p><b>并集选择器</b>是各选择器通过<b>英文逗号链接</b>任何形式的选择器都可以作为并集选择器的一部分</p>
语法：
<p>元素1，元素2{样式声名}</p>
<h4>伪类选择器</h4>
<p>伪类选择器用于某些选择器添加特殊效果，比如给链接添加特殊效果，或选择第一个，或选择第n个元素</p>
<p>伪类选择器书写最大的特点是用冒号表示，比如：：hover、：first-child</p>
<p>伪类选择器很多，有链接伪类、结构伪类等</p>
<a href="链接伪类选择器.html" target="blank">
    <h4>链接伪类选择器</h4>
</a>
a：link &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*选择所有未被访问的链接*/ <br>
a：visited &nbsp;&nbsp;/*选择所有已被访问的链接*/ <br>
a：hover &nbsp;&nbsp;&nbsp;/*选择鼠标指针位于其上的链接*/ <br>
a：active&nbsp;&nbsp;&nbsp; /*选择活动链接链接（鼠标按下未弹起的链接）*/ <br>
<p style="color: tomato;">链接伪类选择器注意事项</p>
1.为了确保生效，请按照LVHA的顺序声明。：link、：visited、：hover、：active。<br>
2.因为链接在浏览器中具有默认样式，实际需要给链接单独指定样式。<br>
实际开发中的写法：<br>
<p>&nbsp; /*a 是标签选择器 所有的链接*/ <br>
    &nbsp; a { <br>
    &nbsp; color：gray；<br>
    &nbsp; } <br>
    &nbsp; /*：hover是链接伪类选择器 鼠标经过*/ <br>
    &nbsp; a：hover { <br>
    &nbsp; color：red；/*鼠标经过时候，由原来的灰色变为红色*/ <br>
    &nbsp; } <br></p>
<a href="focus伪类选择器.html" target="blank">
    <h4>focus伪类选择器</h4>
</a>
<p>：focus伪类选择器用于选取获得焦点的表单元素。</p>
焦点就是光标，一般情况&lt;input&gt;类表单元素才能获取，因此这个选择器也主要针对表单元素<br>
<p>
    input：focus { <br>
    &nbsp;&nbsp;&nbsp;background-color：yellow； <br>
    } <br>
</p>
<h3>CSS的元素显示模式</h3>
<h4>元素显示模式</h4>
<p>作用：网页标签之多，不同地方用不同标签，了解其特点，可以更好布局网页</p>
<p>元素显示模式就是元素（标签）以什么方式进行，比如&lt;div&gt;自己占一行，比如一行可以放多个&lt;span&gt;。</p>
<p>html元素一般分为块元素和行内元素两类</p>
<h4>块元素</h4>
<p>常见的快元素有h1~h6、p、div、ul、ol等其中div是典型的块元素</p>
<p>
    块元素的特点：<br>
    1.自己独占一行。<br>
    2.宽、高、内外边距都可控。<br>
    3.宽度默认是容器（父级宽度）的100%。<br>
    4.是一个容器及盒子，里面可以放行内或者块级元素。<br>
</p>
<p>
    <b>
        <p>注意：</p>
    </b>
    文字类元素内不能使用块级元素<br>
    p标签主要用于存放文字，因此p里面不能放块元素<br>
    同理h1~h6都不能放其他块级元素
</p>
<h4>行内元素</h4>
<p>常见的行内元素有&lt;a&gt;、&lt;strong&gt;、&lt;b&gt;
    &lt;em&gt;、&lt;i&gt;、&lt;del&gt;、&lt;s&gt;、&lt;span&gt;、&lt;ins&gt;、&lt;u&gt;等，其中&lt;span&gt;标签是最典型的行内元素。有的地方将行内元素称为内联元素
</p>
<ol>
    行内元素的特点：
    <li>相邻行内元素在一行上，一行可以显示多个。</li>
    <li>高、宽直接设置是无效的。</li>
    <li>默认宽度就是他本身内容的宽度。</li>
    <li>行内元素只能容纳文本或其他行内元素。</li>
</ol>
<ul>
    注意：
    <li>链接里不能再放链接</li>
    <li>特殊情况链接&lt;a&gt;里面可以放块级元素，但是给&lt;a&gt;转换一下块级元素最安全</li>
</ul>
<h4>行内块元素</h4>
在行内元素中有几个特殊的标签————&lt;img/&gt;、&lt;input&gt;、&lt;td&gt;，他们同时具有块元素和行内元素的特点。有些资料称其为行内块元素。<br>
行内块元素的特点：
<ol>
    <li>和相邻行内元素（行内块）在一行上，但是它们之间会有空白缝隙。一行会显示多个（行内元素特点）</li>
    <li>默认宽度就是他本身内容的宽度。（行内元素特点）</li>
    <li>高度、行高、外边距以及内边距都可以控制（块级元素特点）</li>
</ol>
<a href="元素显示模式的转换.html" target="blank">
    <h4>元素显示模式的转换</h4>
</a>
特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另一种模式的特性。比如想要增加链接&gt;a&lt;的触发范围。
<ul>
    <li>转换为块元素：display：block；</li>
    <li>转换为行内元素：display：inline；</li>
    <li>转换为行内块：display：inline—block</li>
</ul>
<h4>一个小工具的使用 snipaste</h4>
Snipaste是一个简单且强大的截图工具，也可以将截图贴回到屏幕上。<br>
常用快捷方式：
<ol>
    <li>F1可以截图，同时测量大小，设置箭头、书写文字等</li>
    <li>F3在桌面置顶显示</li>
    <li>点击图片，alt可以取色（按下shift可以切换取色模式）</li>
    <li>按下esc取消图片显示</li>
</ol>
<h4><a href="03-案例小米侧边栏.html" target="blank">03-案例：简洁版小米侧边栏</a></h4>
案例的核心思想分两步：
<ol>
    <li>把链接a转换为块级元素，这样链接就能独占一行，且有宽高</li>
    <li>鼠标经过a给链接设置背景颜色</li>
</ol>
<h4>单行文字垂直居中代码</h4>
css没有提供文字垂直居中的代码，所以使用其他方式实现。<br>
解决方案：让文字行高等于盒子的高度，就可以让文字在当前盒子内垂直居中。<br>
比如div设置高：height：40px；则在其中添加line-height：40px；
<h4>单行文字垂直居中原理</h4>
文字行高=上空隙+文字本身高度+下空隙<br>
简单理解：行高的上下空隙把文字挤到中间，如果行高小于盒子高度，文字偏上；反之偏下。
<h3>css背景</h3>
<p>通过css背景属性可以给页面元素添加背景样式。</p>
背景属性可以设置背景颜色、背景颜色、背景平铺、背景图片位置、背景图像固定等。
<h4>背景颜色</h4>
background-color属性定义了元素的背景颜色。<br>
<div style="height: 50px; background-color: rgb(121, 183, 219); line-height: 50px; text-align: center; width: 250px;">
    background-color:颜色值；</div>
一般情况下元素背景色默认值是transparent（透明），可以手动指定背景颜色为透明。
<a href="背景图片.html" target="blank">
    <h4>背景图片</h4>
</a>
background-image属性描述了元素的背景图像，实际开发中常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置（精灵图也是一种运用场景）
<div style="height: 50px; background-color: rgb(121, 183, 219); line-height: 50px; text-align: center; width: 300px;">
    background-image：none | url（url）</div>
<img src="img/背景图片.png">
<h4>背景平铺</h4>
若需在HTML页面上对背景图像进行平铺，可使用background-color属性
<div style="height: 50px; background-color: rgb(121, 183, 219); line-height: 50px; text-align: center; width: 500px;">
    background-repeat：repeat | no-repeat | repeat-x | repeat-y</div>
页面元素既可以添加背景颜色也可以添加背景图片，只不过背景图片会压制背景颜色<br>
<img src="img/背景平铺.png">
<a href="背景图片位置.html" target="blank">
    <h4>背景图片位置</h4>
</a>
利用 background-position属性可以改变图片在背景中的位置
<div style="height: 50px; background-color: skyblue; line-height: 50px; text-align: center; width: 250px;">
    background-position:x y;</div>
参数代表的意思是：x坐标和y坐标。可以使用方位名词或者精确单位。<br>
<table border="1" cellpadding="20" cellspacing=0 width="800px">
    <thead>
        <tr>
            <th>参数值</th>
            <th>说明</th>
        </tr>
    </thead>
    <tr>
        <td>length</td>
        <td>百分数 | 由浮点数字和单位标识符组成的长度值</td>
    </tr>
    <tr>
        <td>position</td>
        <td>top |center |bottom |left |center |right 方位名词</td>
    </tr>
</table>
<ol>
    <li>参数是方位名词
        <ul>
            <li>如果指定两个值都是方位名词，则两个值前后顺序无关，比如left top和top left效果一致</li>
            <li>如果只指定一个方位，另一个省略，则第二个默认为居中</li>
        </ul>
    </li>
    <li>参数是精确单位
        <ul>
            <li>如果参数是精确单位，那么第一个肯定是x坐标，第二个是y坐标</li>
            <li>如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中</li>
        </ul>
    </li>
    <li>参数是混合单位
        <ul>
            <li>如果指定的两个值是精确单位和方位名词混合使用，则第一个是x坐标，第二个是y坐标</li>
        </ul>
    </li>
</ol>
<a href="背景位置方位名词应用一.html" target="blank">
    <h4>背景位置方位名词应用一</h4>
</a>
<a href="超大背景图片.html" target="blank">
    <h4>超大背景图片</h4>
</a>
<a href="超大背景图片.html" target="blank">
    <h4>背景图像固定（背景附着）</h4>
</a>
background-attachment属性设置背景图像是否固定或者随页面其余部分滚动。 <br>
background-attachment后期可以制作视差滚动效果。<br>
<div style="height: 30px; width: 360px; background-color: skyblue; line-height: 30px; text-align: center;">
    background-attachment：scroll |fixed</div>
<table border="1" cellspacing="0" width="400px">
    <tr style="text-align: left; ">
        <th>参数</th>
        <th>说明</th>
    </tr>
    <tr>
        <td>scroll</td>
        <td>背景图像随对象内容滚动</td>
    </tr>
    <tr>
        <td>fixed</td>
        <td>背景图像固定</td>
    </tr>
</table>
<h4>背景复合写法</h4>
为了简化背景属性的代码，我们可以将这些属性合并简写在同一属性background中。从而节约代码量<br>
当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为：<br>
background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置；<br>
<div style="width: 550px; height: 40px; line-height: 40px; background-color: skyblue; text-align: center;">
    background：transparent url（url）repeat-y fixed top</div>
实际开发中，更提倡的写法，其中各个属性顺序可以打乱。
<a href="背景颜色半透明.html" target="blank">
    <h4>背景颜色半透明</h4>
</a>
css3为我们提供了背景颜色半透明的效果。
<div style="width: 300px; height: 40px; line-height: 40px; background-color: skyblue; text-align: center;">
    background：rgba（0，0，0，0.3）；</div>
<li>最后一个参数是alpha透明度，取值在0~1之间</li>
<li>我们习惯把0.3的0省略掉，写为background：rgba（0，0，0，.3）；</li>
<li>注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响</li>
<li>css3新增属性，是IE9+版本浏览器才支持的</li>
<li>但是在实际开发中，我们不太关注兼容性写法，可以放心使用</li>
<h4>背景总结</h4>
<img src="img/背景总结.png" alt="">
<a href="04-综合案例.html" target="blank">
    <h4>04-综合案例</h4>
</a>
<h4>案例：五彩导航</h4>
<img src="img/五彩导航示例.png" alt=""><br>
练习价值：<br>
<ol>
    <li>链接属于行内元素，但是此时需要宽高，因此需要模式转换</li>
    <li>里面的文字需要水平居中和垂直居中，因此需要单行文字垂直居中的代码</li>
    <li>链接里面需要设置背景图片，因此需要用到相关属性设置</li>
    <li>鼠标经过变换背景图片，因此需要用到链接伪类选择器</li>
</ol>
<h3>css的三大特性</h3>
css有三个非常重要的特性：层叠性、继承性、优先级。
<h4>1.1层叠性</h4>
相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式，层叠性主要解决样式冲突的问题。<br>
层叠性原则：
<li>样式冲突，遵循就近原则，哪个样式离结构近，就执行哪个样式</li>
<li>样式不冲突，就不会层叠</li>
<img src="img/css层叠性.png" alt="">
<h4>1.2继承性</h4>
css中的继承：子标签会继承父标签的某些样式，如：文本颜色、字号。<br>
<img src="img/css继承性.png" alt="">
<li>恰当的使用继承可以简化代码，降低css样式的复杂性</li>
<li>子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）</li>
<b>行高的继承性</b>
<div style="height: 100px; width:400px; background-color: aqua;">body {<br>
    <p style="text-indent:2em;"> font：12px/1.5 MicrosoftYaHei ；</p>
    }
</div>
<li>行高可以跟单位也可以不跟</li>
<li>如果子元素没有设置行高，则会继承父元素的行高为1.5倍</li>
<li>此时子元素的行高是：当前子元素文字大小×1.5</li>
<h4>1.3优先级</h4>
当一个元素指定多个选择器，就会有优先级的产生
<li>选择器相同，则执行层叠性</li>
<li>选择器不同，则根据选择器权重执行</li>
<img src="img/css优先级.png" alt=""><br>
<b>任何属性后加上“！important”都会优先执行</b><br>
<b>注意：继承的权重是0，如果元素没有直接选择，不管父元素权重多高，子元素继承后权重为0，哪怕父元素加“！important”</b><br>
<b>a链接相当于自己默认制定样式：蓝色、有下划线</b><br>
<b style="color: red; ">权重叠加：</b>如果是复合选择器，则会有权重叠加，需要计算权重。<br>
<li>div ul li ------> 0,0,0,3</li>
<li>.nav ul li ------> 0,0,1,2</li>
<li>a:hover ------> 0,0,1,1</li>
<li>.nav a ------> 0,0,1,1</li>
<h4>盒子模型</h4>
页面布局要学习三大核心：盒子模型，浮动，定位。学习好盒子模型能非常好的帮助我们布局页面
<h4>1.1看透网页布局的本质</h4>
网页布局过程：<br>
1.准备好相关网页元素，网页元素基本都是盒子box。<br>
2.利用CSS设置好盒子样式，然后摆放到相应位置。<br>
3.往盒子里面装内容。<br>
网页布局核心本质就是：利用CSS摆盒子。<br>
<h4>1.2盒子模型（Box Model）组成</h4>
所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形盒子，也就是一个盛装内容的容器。<br>
CSS盒子模型本质上是一个盒子，封装周围的html元素，它包括：边框、外边距、内边距、实际内容<br>
<img src="img/盒子模型组成.png" alt=""><img src="img/盒子模型解释.png" alt="">
<a href="盒子模型边框.html" target="_blank">
    <h4>1.3边框（border）</h4>
</a>
border可以设置元素的边框。边框有三个部分组成：边框宽度（粗细）、边框样式、边框颜色<br>
语法：
<div style="height: 40px; width: 500px; background-color: skyblue; line-height:2.5;">border：border-width |border-style
    |border-color</div>
<img src="img/边框属性.png" alt=""><br>
CSS边框属性允许你指定一个元素边框的样式和颜色。<br>
边框简写：
<div style="height: 40px; width: 300px; background:skyblue; line-height: 2.5;">border：1px solid red；没有顺序</div>
<a href="边框的复合写法.html" target="_blank">边框的复合写法</a>
<div style="height: 40px; width: 400px; background:skyblue; line-height: 2.5;"> border-top:1px solid red;
    /*只设置上边框，其余同理*/ </div>
<a href="表格的细线边框.html">
    <h4>1.4表格的细线边框</h4>
</a>
border-collaspe属性控制浏览器绘制表格边框的方式。他控制相邻单元格的边框
语法：
<div style="height: 40px; width: 270px; background-color:skyblue; line-height: 2.5;">border-collaspe：collapse；</div>
<li>collapse 单词是合并的意思</li>
<li>border-collapse：collapse；表示相邻边框合并在一起</li>
<a href="边框会影响盒子的实际大小.html" target="_blank">
    <h4>1.5边框会影响盒子实际大小</h4>
</a>
边框会额外增加盒子的实际大小，因此有两种解决方案；
<li>测量盒子大小时候，不量边框</li>
<li>若测量时候包含边框，则需要width/height减去边框宽度</li>
<a href="盒子模型内边距.html">
    <h4>1.6内边距(padding)</h4>
</a>
padding属性用于设置内边距，即边框与内容之间的距离。<br>
<img src="img/内边距属性值.png" alt=""><br>
<a href="盒子模型内边距复合写法.html" target="_blank" style="text-decoration: none;">padding属性（简写属性）可以有一到四个值。</a><br>
<img src="img/内边距简写.png" alt=""><br>
当我们给盒子指定padding之后，发声两件事：
<li>内容和边框有了距离，添加了内边距</li>
<li>padding影响了盒子实际大小</li>
也就是说如果盒子指定了宽高，再指定内边框会撑大盒子<br>
<b>解决方案：</b><br>
如果保证盒子跟效果图大小保持一致，则让width/height减去多出来的内边距大小即可<br>
<a href="05-案例新浪导航栏-padding影响盒子的好处.html" target="_blank">
    <h4>05-案例新浪导航栏-padding影响盒子的好处</h4>
</a>
padding内边距可以撑开盒子，我们可以做非常巧妙的运用。<br>
因为每个导航栏里面的字数不一样多，我们可以不用给每个盒子宽度，直接给padding最合适
<ol>
    相关取值：
    <li>上边框为3像素，颜色为#ff8500</li>
    <li>下边框为1像素，颜色为#edeef0</li>
    <li>盒子高度为41像素，背景颜色为#fcfcfc</li>
    <li>文字颜色为#4c4c4c</li>
</ol>
<a href="06-案例小米侧边栏改版.html" target="_blank">
    <h4>06-案例小米导航栏修改-padding影响盒子大小计算</h4>
</a>
padding内边距可以撑开盒子，有时候，也会让我们修改宽度<br>
所以小米侧边栏 这个案例，文字距离左侧的距离不应该用text-indent 这样不精确<br>
实际开发中是给padding值，这样更加精确。
<a href="padding不会影响盒子大小的情况.html" target="_blank">
    <h4>padding不会影响盒子大小的情况</h4>
</a>
如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子<br>
哪怕数值是100%也会撑开盒子
<a href="盒子外边距.html" target="_blank">
    <h4>1.7外边距（margin）</h4>
</a>
<p>margin属性用于设置外边距，即控制盒子和盒子之间的距离。</p>
<img src="img/盒子外边距属性.png" alt=""><br>
margin简写方式代表的意义跟padding完全一致<br>
<a href="外边距典型应用.html" target="_blank">
    <h4>1.7外边距典型应用</h4>
</a>
外边距可以让盒子水平居中，但是必须满足两个条件：
<ol>
    <li>盒子必须指定宽度（width）</li>
    <li>盒子左右外边距设置为auto</li>
</ol>
<div style="height: 40px; width: 300px; background:skyblue; line-height: 2.5;">.header {
    width:960px; margin:0 auto;}</div>
常见的三种写法：
<ul>
    <li>margin-left：auto；margin-right：auto；</li>
    <li>margin：auto；</li>
    <li>margin：0 auto；</li>
</ul>
<b style="color: red;">注意：</b>以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父亲添加text-align：center即可
<h4>1.8外边距合并</h4>
使用<span style="color: red;">margin</span>定义块元素的垂直外边距时，可能会出现外边距的合并。<br>
<p>主要有两种情况：</p>
<ol>
    <li><b>相邻块元素垂直外边距的合并</b></li>
    <li><b>嵌套块元素垂直外边距的塌陷</b></li>
</ol>
<a href="外边距合并-相邻块元素垂直外边距合并.html" target="_blank">
    <p><b>1.相邻块元素垂直外边距的合并</b></p>
</a>
当上下相邻的两个块元素（兄弟关系）相遇时，若上边元素有下外边距 margin-bottom，下边的元素有上外边距 margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和。<span
    style="color:red;">取两个值中较大者这种现象被称为<b>相邻块元素垂直外边距的合并</b> </span><br>
<img src="img/合并.png" alt="" width="50%">
<p><b>解决方案：</b></p>
<p style="color: red;">尽量只给一个盒子添加margin值</p>
<a href="外边距合并-嵌套块级元素.html" target="_blank">
    <p><b>2.嵌套块级元素垂直外边距的塌陷</b></p>
</a>
对于两个嵌套关系（父子关系）的块级元素，父元素上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距垂直。
<div><img src="img/外边距塌陷.png" alt=""></div>
<p><b>解决方案：</b></p>
<ol>
    <li>可以为父元素定义上边框</li>
    <li>可以为父元素定义上内边距</li>
    <li>可以为父元素添加overflow：hidden</li>
</ol>
还有其他方法，比如浮动、固定、绝对定位的盒子不会有塌陷问题。
<a href="清除内外边距.html" target="_blank">
    <h4>1.9清除内外边距</h4>
</a>
网页元素很多带有默认的内外边距，不同浏览器内外边距不同，布局之前清楚网页内外边距。
<div style="width: 370px;height: 105px;background-color:aqua;text-align:left;line-height: 1.5;">
    &nbsp;&nbsp;&nbsp;&nbsp;* {<br>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding :0; /*清除内边距/ <br>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin :0; /*清除外边距/ <br>
    &nbsp;&nbsp;&nbsp;&nbsp;}
</div>
<p style="color: red;"><b>注意：</b>行内元素为了照顾兼容性，尽量设置左右内外边距，不设置上下内外边距。但是转换为块级和行内块元素就可以了</p>
<h4>PS基本操作</h4>
<p>因为网页美工大部分效果图都是利用<span style="color: red;">PS(Photoshop)</span>来做,所以大部分切图工作在<span style="color:red;">PS</span>中完成</p>
<li><span style="color: red;">文件→打开:</span>可以打开我们要测量的图片</li>
<li><span style="color: red;">Ctrl+R:</span>可以打开标尺,或者<span style="color: red;">视图→标尺</span></li>
<li>右击标尺,把里面的单位改成<span style="color: red;">像素</span></li>
<li><span style="color: red;">Ctrl+＋:</span>可以放大视图,<span style="color: red;">Ctrl+减号(-)</span>可以缩小试图</li>
<li>用<span style="color: red;">选区</span>拖动,可以测量大小</li>
<li><span style="color: red;">Ctrl+D</span>可以取消选区,或者在<span style="color: red;">空白处点击</span>也可以取消选区</li>
<img src="img/PS基操.png" alt="">
<a href="07-综合案例产品模块.html" target="_blank" style="text-decoration: none;">
    <h4>07-综合案例产品模块</h4>
</a>
<a href="08-综合快报模块.html" style="text-decoration: none;">
    <h4>08-快报模块</h4>
</a>
<p><b>新知识点：去掉li前面的项目符号（小圆点）</b></p>
语法：
<div style="background-color:rgb(228, 240, 255) ; width: 300px;height: 35px;text-align:left;line-height: 1.5">
    list-style：none</div>
<a href="圆角边框.html" target="_blank">
    <h4>圆角边框（重点）</h4>
</a>
在CSS中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。<br>
语法：
<div style="background-color:rgb(228, 240, 255) ; width: 300px;height: 35px;text-align:left;line-height: 1.5">
    border-radius:length;</div>
<p><span style="color: red;">radius半径（圆的半径）原理：</span>（椭）圆与边框的交集形成圆角效果</p>
<img src="img/圆角边框原理.png" alt="">
<a href="圆角边框写法.html" target="_blank">圆角边框写法</a>
<li>参数值可以是百分比</li>
<li>如果是正方形，想要设置一个圆，把数值修改为宽高的一半，或为50%</li>
<li>如果是个矩形，设为高的一半就可以做<img src="img/新人福利.png" style="height: 25px;"></li>
<li>该属性是一个简写属性，可以跟四个值，分别代表左上、右上、右下、左下。两个值则是对角线关系</li>
<li>分开写border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius。顺序不能颠倒</li>
<a href="盒子阴影.html" target="_blank">
    <h4>盒子阴影（重点）</h4>
</a>
语法：
<div style="background-color:rgb(228, 240, 255) ; width: 600px;height: 35px;text-align:left;line-height: 1.5">
    box-shadow:h-shadow v-shadow blur spread color inset</div>
<img src="img/盒子阴影值.png" alt="">
<p><b style="color: red;">注意：</b></p>
<li>默认外阴影（outset），但是不能写，会导致阴影无效</li>
<li>影子不占用空间，不会影响其他盒子排列</li>
<a href="文字阴影.html" target="_blank">
    <h4>文字阴影</h4>
</a>
css中，我们可以使用text-shadow属性将阴影应用于文本<br>
语法：
<div style="background-color:rgb(228, 240, 255) ; width: 600px;height: 35px;text-align:left;line-height: 1.5">
    text-shadow:h-shadow v-shadow blur color</div>
<img src="img/文字阴影值.png" alt="">
<h3>浮动（float）</h3>
<h4>1.1传统网页布局的三种方式</h4>
网页布局的本质————用CSS来摆放盒子。把盒子放到相应位置。<br>
CSS提供了三种传统（PC）布局方式，就是盒子如何进行排列顺序：
<li>普通流（标准流）</li>
<li>浮动</li>
<li>定位</li>
<h4>1.2标准流（普通流/文档流）</h4>
<p>所谓标准流：就是标签按照规定默认方式排列</p>
<ol>
    <li>块级元素独占一行，从上到下
        <ul>
            <li>常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table</li>
        </ul>
    </li>
    <li>
        行内元素按照顺序，从左到右顺序排列，碰到父元素边缘自动换行
        <ul>
            <li>常用元素：span、a、i、em等</li>
        </ul>
    </li>
</ol>
<p>以上都是标准流布局，前边学的就是标准流，标准流是最基本的布局方式</p>
<p>这三种布局方式都是用来摆放盒子的，盒子摆放到合适位置，布局自然完成</p>
<p>注意：实际开发中一个页面基本上包含了三种布局</p>
<a href="行内块元素中间有缝隙.html" target="_blank">
    <h4>1.3为什么需要浮动</h4>
</a>
提问：我们用标准流能很方便的实现如下效果吗？
<ol>
    <li>如何让多个块级盒子（div）水平排列成一行
        <br>
        <img src="img/盒子水平示例.png" alt=""><br>
        比较难，虽然转换为行内块元素可以一行多个，但是之间有缝隙，难以控制
    </li>
    <li>如何实现两个盒子左右对齐<br>
        <img src="img/盒子左右对齐示例.png" alt=""><br>
    </li>
</ol>
总结：有很多的布局效果，标准流没办法完成，此时可以利用浮动完成布局，因为浮动可以改变标签默认的排列方式。<br>
浮动最典型的应用：可以让多个块级元素一行内排列显示<br>
<p>
    网页布局第一准则：多个块级元素纵向排列用标准流，多个块级元素横向排列用浮动
</p>
<a href="什么是浮动.html" target="_blank">
    <h4>1.4什么是浮动</h4>
</a>
<p>float属性用于创造浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。</p>
语法：
<div style="background-color:rgb(228, 240, 255) ; width: 600px;height: 35px;text-align:left;line-height: 1.5">选择器{
    float：属性值；}</div>
<img src="img/float属性值.png" alt="">
<a href="浮动特性.html" target="_blank">
    <h4>1.5浮动特性（难点）</h4>
</a>
加了浮动之后的元素会具有很多特性需要掌握
<ol style="color:red;">
    <li>浮动元素会脱离标准流（脱标）</li>
    <li>浮动元素会一行内显示并且元素顶部对齐</li>
    <li>浮动元素会具有行内块元素特性</li>
</ol>
<p>设置了浮动（float）元素最重要特性：</p>
<ol>
    <li>脱离标准普通流控制（浮）移动到指定位置（动），（俗称脱标）</li>
    <li>浮动的盒子不再保留原先的位置（前赴后继浮动的在上标准流在下）</li>
</ol>
<a href="浮动特性一行显示.html" target="_blank">
    <h4>1.5浮动特性（难点）</h4>
</a>
<p>2.如果多个盒子都设置了浮动，则会按照属性值一行内显示并且顶端对其排列</p>
<p style="color: red;"><b>注意：</b>浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下，多出的盒子会另起一行</p>
<a href="浮动特性-行内块元素.html" target="_blank">
    <h4>1.5浮动特性（难点）</h4>
</a>
<p>3.浮动元素会具有行内块元素特性</p>
<p>任何元素都可以添加浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。</p>
<li>如果块级盒子没有设置宽度，默认和父级一样，但是添加浮动之后，宽度由内容决定</li>
<li>浮动盒子中间是没有缝隙的，是紧挨着的</li>
<li>行内元素同上</li>
<h4>1.6浮动元素经常和标准流父级搭配使用</h4>
<p>为了约束浮动元素位置，网页布局一般采取策略：</p>
<p style="color: red;">先用标准流的父级元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则</p>
<a href="09-案例小米布局.html" target="_blank">
    <h4>09-案例小米布局</h4>
</a>
<img src="img/9.1.png" alt="">
<a href="09.2浮动布局练习2.html" target="_blank">
    <h4>浮动布局练习2</h4>
</a>
<img src="img/9.2.png" alt="">
<a href="09.3浮动布局练习3.html" target="_blank">
    <h4>09.3浮动布局练习3</h4>
</a>
<p style="color: red;">网页布局第二准则：先设置盒子大小，之后设置盒子位置</p>
<img src="img/9.3.png" alt="">
<h3>常见网页布局</h3>
<h4>2.1常见网页布局</h4>
<img src="img/常见网页布局.png" alt="">
<img src="img/常见网页布局2.png" alt="">
<img src="img/常见网页布局3.png" alt="">
<h4>2.2浮动布局注意点</h4>
<p><b>1.浮动和标准流的父盒子搭配</b></p>
先用标准流的父级元素排列上下位置，之后内部子元素采取浮动排列左右位置
<p><b>2.一个元素浮动了，理论上其余的兄弟元素也要浮动</b></p>
一个盒子里面有多个盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。<br>
浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流
<h3>3.清除浮动</h3>
<h4>3.1为什么需要清除浮动？</h4>
由于父级元素很多情况下，不方便给高度，但是盒子浮动又不占位置，最后父级盒子高为0就会影响后面标准流盒子的排列。<br><img src="img/清除浮动.png" alt=""><br>
<li>由于浮动元素不在占有原文档流的位置，所以会影响后面元素的排列</li>
<h4>3.2清除浮动的本质</h4>
<li>清除浮动的本质就是清除浮动元素造成的影响</li>
<li>如果父盒子本身有高度，则不需要清除浮动</li>
<li>清除浮动之后，父级元素会根据浮动的盒子自检高度，父级元素有高度，就不会影响后面的标准流</li>
语法：
<div style="background-color:rgb(228, 240, 255) ; width: 600px;height: 35px;text-align:left;line-height: 1.5">选择器{
    clear：属性值；}</div>
<img src="img/清除浮动值.png" alt=""><br>
实际开发中，几乎只用 clear：both；<br>
<p>清除浮动的策略是：闭合浮动。</p>
<h4>3.3清除浮动的方法</h4>
<li>额外标签法也称为隔墙法，是W3C推荐做法</li>
<li>父级添加 overflow 属性</li>
<li>父级添加 after 伪元素</li>
<li>父级添加双伪元素</li>
<a href="清除浮动-额外标签法.html" target="_blank">
    <h4>3.3清除浮动-额外标签法</h4>
</a>
<p>额外标签法也称为隔墙法，是W3C推荐做法</p>
<p>额外标签法会在浮动元素末尾添加一个空标签。例如 &lt;div style=" clear:both" &gt;,或者其他标签（如&lt;br/&gt;）</p>
<li>优点：通俗易懂，书写方便</li>
<li>缺点：添加许多无意义标签，结构化差</li>
<p style="color: red;"><b>注意：</b>要求新添加的空标签必须是块级元素</p>
<a href="清除浮动-父级添加 overflow.html" target="_blank">
    <h4>3.3清除浮动-父级添加 overflow </h4>
</a>
可以给父级添加 overflow 属性，将其属性值设为hidden、auto或scroll <br>
<li>优点：代码简洁</li>
<li>缺点：无法显示溢出部分</li>
<a href="清除浮动-父级添加 after 伪元素.html" target="_blank">
    <h4>3.3清除浮动-父级添加 after 伪元素</h4>
</a>
:after 方式是额外标签的升级方法。也是给父元素添加
<div style="background-color:rgb(228, 240, 255) ; width: 600px;height: 280px;text-align:left;line-height: 1.5">
    .clearfix:after {<br>
    &nbsp;&nbsp;content :"";<br>
    &nbsp;&nbsp;display:black;<br>
    &nbsp;&nbsp;height:0;<br>
    &nbsp;&nbsp;clear:both;<br>
    &nbsp;&nbsp;visibility:hidden;<br>
    }<br>
    .clearfix { /*IE6、7专有*/<br>
    &nbsp;&nbsp;*zoom:1;<br>
    }
</div>
<li>优点：没有增加标签，结构更简单</li>
<li>缺点：照顾低版本浏览器</li>
<li>代表网站：百度、淘宝网、网易等</li>
<a href="清除浮动-父级添加双伪元素.html" target="_blank">
    <h4>3.3清除浮动-父级添加双伪元素</h4>
</a>
<div style="background-color:rgb(228, 240, 255) ; width: 600px;height: 280px;text-align:left;line-height: 1.5">
    .clearfix:before,.clearfix:after {<br>
    &nbsp;&nbsp;content :"";<br>
    &nbsp;&nbsp;display:table;<br>
    }<br>
    .clearfix:after {<br>
    &nbsp;&nbsp;clear:both;<br>
    }<br>
    .clearfix {<br>
    &nbsp;&nbsp;*zoom:1;<br>
    }
</div>
<li>优点：代码简洁</li>
<li>缺点：照顾低版本浏览器</li>
<li>代表网站：小米、腾讯等</li>
<h4>3.4清除浮动总结</h4>
<p><b>为什么需要清除浮动？</b></p>
1.父级没有高度<br>
2.子盒子浮动了<br>
3.影响下面布局了<br>
<img src="img/清除浮动对比.png" alt="">
<a href="study/index.html" target="_blank">
    <h4>10-案例学成在线</h4>
</a>
<b>CSS书写顺序：</b>
<img src="img/CSS书写顺序.png" alt="">
<br>
<img src="img/头部制作.png" alt="">
<br>
<img src="img/搜索框.png" alt="">
<h3>CSS定位</h3>
<h3>定位</h3>
<h4>1.1为什么需要定位</h4>
<p>提问：以下情况使用标准流或者浮动能实现吗</p>
<li>某个元素可以自由的在一个盒子里移动位置，并且压住其他盒子</li>
<p>以上效果，标准流或浮动都无法快速实现，此时需要定位</p>
<p>所以：</p>
<li>浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子</li>
<li>定位则是可以让盒子自由的在某个盒子内移动或者固定在屏幕中的某个位置，并且可以压住其他盒子</li>
<h4>1.2定位的组成</h4>
<p>将盒子定在某一位置，所以定位也是摆放盒子，按照定位的方式移动盒子</p>
<p>定位=定位模式+边偏移</p>
<p>定位模式：用于指定一个元素在文档中的定位方式。<br>边偏移：决定该元素最终位置。</p>
<h5>1.定位模式</h5>
定位模式决定元素的定位方式，他通过CSS的position属性设置，其值可分为四个：<br>
<img src="img/定位模式.png" alt="">
<h5>边偏移</h5>
边偏移就是定位盒子移动到最终位置。有top、bottom、left和right四个属性。<br>
<img src="img/边偏移.png" alt="">
<h4>1.3静态定位static（了解）</h4>
静态定位是元素默认的定位方式，无定位的意
<p>语法：</p>
<div style="background-color:rgb(228, 240, 255);height: 50px;width: 300px;line-height: 50px;">选择器 {position：static；}
</div>
<li>静态定位按照标准流特性摆放位置，它没有边偏移</li>
<li>静态定位在布局时很少用到</li>
<a href="相对定位.html" target="_blank">
    <h4>1.4相对定位relative（重要）</h4>
</a>
相对定位是元素在移动时候，相对于原来位置
<p>语法：</p>
<div style="
background-color:rgb(228, 240, 255);height: 50px;width: 300px;line-height: 50px;padding-left: 5px;">选择器
    {position：relative；}</div>
相对定位特点：（务必记住）
<li>他是相对于自己原来位置来移动的（移动位置时候的参照点是自己原来的位置）</li>
<li>原来在标准流的位置继续占有，后面的盒子仍然以标准流方式对待他（不脱标，继续保留原位置）</li>
因此，相对定位并没有脱标。它最典型的应用就是给绝对定位当爹的
<a href="绝对定位.html" target="_blank">
    <h4>1.5绝对定位 absolute（重要）</h4>
</a>
绝对定位是元素移动位置时候，相对于祖先元素讲
<p>语法：</p>
<div style="background-color:rgb(228, 240, 255);height: 50px;width: 300px;line-height: 50px;">选择器 {position：absolute；}
</div>
绝对定位特点：（务必记住）
<li>如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位</li>
<li>如果祖先盒子有定位，则以最近一级有定位的祖先元素为参考位置移动</li>
<li>绝对定位不在占有原先位置（脱标）</li>
<h4>1.6子绝父相的由来</h4>
子级使用绝对定位，父级使用相对定位
<li>子级绝对定位，不会占有位置，则可以放到父盒子里任何地方，不会影响其他兄弟</li>
<li>父盒子需要加定位限制子盒子在父盒子内显示</li>
<li>父盒子布局时，需要占有位置，因此父盒子只能是相对定位</li>
<p>总结：因为腹肌需要占有位置，因此相对定位，子盒子不需要占有位置，绝对定位</p>
当然子绝父相不是绝对的，根据情况选择定位方式
<a href="固定定位.html" target="">
    <h4>1.7固定定位fixed（重要）</h4>
</a>
固定定位是元素固定于浏览器可视区的位置。主要适用场景：可以在浏览器页面滚动时元素位置不变。
<div style="background-color:rgb(228, 240, 255);height: 50px;width: 300px;line-height: 50px;">选择器 {position：fixed；}
</div>
固定定位的特点：（务必记住）
<li>以浏览器的可视窗口为参照点移动元素</li>
<li>跟父亲没有关系</li>
<li>不随滚动条滚动</li>
<li>固定定位不占有原先位置</li>
<a href="固定技巧.html" target="_blank">
    <h5>固定定位小技巧：固定在版心两侧</h5>
</a>
小算法：
<li>让固定的盒子left：50%，走到浏览器可视区（也可以看成是版心）一半位置</li>
<li>让固定定位的盒子margin-left：版心宽度的一半。多走版心宽度一半位置</li>
<a href="粘性定位.html" target="_blank">
    <h4>1.8粘性定位 sticky（了解）</h4>
</a>
粘性定位可以被认为是相对定位和固定定位的混合。 sticky粘性的<br>
语法：
<div style="background-color:rgb(228, 240, 255);height: 50px;width: 300px;line-height: 50px;">选择器
    {position：sticky；top：10px；}</div>
粘性定位的特点：
<li>以浏览器的可视窗口为参照点移动元素（固定定位特点）</li>
<li>粘性定位占有原先位置（相对定位特点）</li>
<li>必须添加top、left、right、bottom其中一个才有效</li>
<h4>1.9定位为总结</h4>
<img src="img/定位总结.png" alt="">
<li>一定记住 相对定位、固定定位、绝对定位两大特点：1.是否有位置（脱标否）。2.以谁为基准点移动位置</li>
<li>学习定位重点学会子绝父相</li>
<a href="定位堆叠次序.html" target="_blank">
    <h4>1.10定位叠放次序 z-index</h4>
</a>
在使用布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序（z轴）
<div style="background-color:rgb(228, 240, 255);height: 50px;width: 300px;line-height: 50px;">选择器 {z-index：1；}</div>
<li>数值可以是正整数、负整数或0、，默认是auto，数值越大，盒子越靠上</li>
<li>如果数值相同，则按照书写顺序，后来居上</li>
<li>数字后面不能加单位</li>
<li>只有定位的盒子才有z-index属性</li>
<h4>1.11定位的拓展</h4>
<a href="绝对定位水平垂直居中.html" target="_blank"><b>1.绝对定位盒子居中</b></a><br>
加了绝对定位的盒子不能通过margin：0 auto；水平居中，但是可以通过以下计算方法实现水平和垂直居中
<li>left：50%；：让盒子左侧移动到父级元素水平中心位置</li>
<li>margin-乐翻天：-100px；：让盒子向左移动自身宽度的一半</li>
<a href="定位的特殊性.html" target="_blank"><b>2.定位的特殊性</b><br></a>
绝对定位和固定定位也和浮动类似。
<li>行内元素添加绝对或者固定定位，可以直接设置高度和宽度</li>
<li>块级元素添加绝对定位或者固定定位，如果不给宽高，默认大小是内容大小</li>
<b>3.脱标的盒子不会出发外边距塌陷</b>
<br>浮动元素、绝对定位（固定定位）元素都不会出发外边距合并的问题。<br>
<a href="定位会完全压住标准流盒子内容.html" target="_blank"><b>4.绝对定位（固定定位）会完全压住盒子</b><br></a>
浮动元素不同，只会压住下面标准流的盒子，里面的内容不会被压（文字、图片）<br>
但是绝对定位（固定定位）会压住下面标准流所有内容<br>
浮动之所以不会压住文字，因为浮动产生之初目的就是左文字环绕效果。文字围绕浮动元素
<h3>综合案例</h3>
<a href="11-案例：淘宝焦点图布局制作.html" target="_blank">
    <h4>11-案例：淘宝焦点图布局制作</h4>
</a>
<p>1.大盒子我们类名为：tb-promo 淘宝广告</p>
<p>2.里面先放一张图</p>
<p>3.左右两个按钮 用链接 。左箭头 prev 右箭头 next</p>
<p>4.底侧小圆点ul继续做。类名为promo-nav</p>
<h3>4.元素的显示与隐藏</h3>
类似网站广告，当我们点击关闭就不见，但是我们重新刷新页面，会重新出现！<br>
本质：让一个元素在页面中隐藏或显示出来。
<ol>
    <li>display显示隐藏</li>
    <li>visibility显示隐藏</li>
    <li>overflow 溢出显示隐藏</li>
</ol>
<a href="display属性.html" target="_blank">
    <h4>4.1display属性</h4>
</a>
display属性用于设置一个元素应如何显示。
<ul>
    <li>display：none；隐藏对象</li>
    <li>display：block；除了转换为块级元素，同时还有显示元素的意思</li>
</ul>
<p style="color:red ;">display隐藏元素后，不在占有原来的位置</p>
<p>后面应用极其广泛，搭配JS可以做很多网页特效</p>
<a href="visibility可见性.html" target="_blank">
    <h4>4.2visibility可见性</h4>
</a>
<ul>
    <li>visibility：visible；元素可视</li>
    <li>visibility：hidden；元素隐藏</li>
</ul>
<p style="color:red ;">visibility隐藏元素后，继续占有的位置</p>
<p>如果隐藏元素想要原来位置，就用visibility：hidden</p>
<p>如果隐藏元素不想要原来位置，就用display：none</p>
<a href="overflow溢出.html" target="_blank">
    <h4>4.3overflow溢出</h4>
</a>
overflow属性指定了如果内容溢出一个元素框时，会发生什么。<br>
<img src="img/overflow属性.png" alt=""><br>
一般请境况下，我们都不想让溢出部分显示，会影响布局<br>
但是如果有定位，慎用overflow：hidden；因为会隐藏多余部分
<p>1.display显示隐藏元素 但是不保留位置</p>
<p>2.visibility显示隐藏元素 但是保留原来位置</p>
<p>3.overflow溢出显示隐藏 但是只对于溢出部分处理</p>
<a href="12-案例土豆网鼠标经过显示遮罩.html" target="_blank">
    <h4>12-案例土豆网鼠标经过显示遮罩</h4>
</a>
<p>1、练习元素的显示与隐藏</p>
<p>2、练习元素的定位</p>
<p>核心原理：原先半透明的黑色遮罩看不见，鼠标经过大盒子，就显示出来</p>
<p>遮罩的盒子不占有位置，就需要用绝对定位和display配合使用</p>
<h3>CSS 高级技巧</h3>
<h4>1.精灵图</h4>
<ol>
    <li>为什么需要精灵图</li>
    <li>精灵图的使用</li>
    <li>精灵图课堂案例</li>
</ol>
<h4>1.1为什么需要精灵图</h4>
一个网页中有很多小的背景图作为装饰，当网页中图像过多时，服务区会频繁的接受和发送请求图片，造成服务器请求压力过大，大大降低页面加载速度<br>
因此，<span style="color: red;">为了有效减少服务器接受和发送请求的次数，提高页面的加载速度，</span>出现了<span style="color: red;">CSS精灵技术</span>（也称CSS
Sprites、CSS雪碧）
<p style="color: red;">核心原理：将网页的一些小背景图像整合到一张大图中，这样服务器就只需要一次请求就可以了</p>
<a href="精灵图的使用.html" target="_blank">
    <h4>1.2精灵图（sprites）的使用</h4>
</a>
<p>使用精灵图核心：</p>
<ol>
    <li>精灵技术主要针对背景图片使用。把多个小背景图整合到一张大图上</li>
    <li>这张大图片称为sprites 精灵图 或者 雪碧图</li>
    <li>移动背景位置，此时可以使用background-position。</li>
    <li>移动的距离就是这个目标图片的x和y坐标，注意网页中坐标有所不同</li>
    <li>一般情况往上往左移动，数值是负数</li>
    <li>使用精灵图时候需要精确测量，每个小背景图片大小和位置</li>
</ol>
<a href="13-案例拼出自己名字.html">
    <h4>13-案例拼出自己名字</h4>
</a>
<h3>2.字体图标</h3>
<h4>2.1字体图标的产生</h4>
字体图标使用场景：主要用于显示网页中通用、常用的一些小图标。
<p>精灵图是有诸多优点，但是缺点很明显。</p>
<ol>
    <li>图片文件还是比较大</li>
    <li>图片本身放大和缩小会失真</li>
    <li>一旦图片制作完毕想要更换很复杂</li>
</ol>
此时，有一种技术的出现很好地解决了以上问题，就是字体图标 iconfont。<br>
字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质是字体
<h4>2.2字体图标的优点</h4>
<li>轻量级：一个图标字体要比一系列图像小，一旦字体加载了，图标就会马上渲染出来，减少服务器请求</li>
<li>灵活性：本质是文字，可以很随意改变颜色、产生阴影、透明效果、旋转等</li>
<li>兼容性：几乎支持所有的浏览器</li>
<p>注意：字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化</p>
<b>总结：</b>
<ol>
    <li>如果遇到一些结构和样式比较简单的小图标，就用字体。📍、👈、📷</li>
    <li>如果遇到一些结构和样式复杂一点的小图片，就用精灵图</li>
</ol>
<p> </p>
<p> </p>
<p>字体图标是一些网页常见的小图标，我们直接网上下载，因此可分为：</p>
<p>1.字体图标的下载</p>
<p>2.字体图标的引入（引入到html网页中）</p>
<p>3/字体图标的追加（以后添加新的小图标）</p>
<h4>2.3字体图标的下载</h4>
<b>推荐下载网址：</b>
<li>Icomoon字库 <a href="http://icomoon.io" target="_blank"> http://icomoon.io</a> 推荐指数⭐⭐⭐⭐⭐<br>
    IcoMoon成立于2011年，推出了第一个自定义图标字体生成器，它允许用户选择所需要的图标，使他们成一字型。该字库内容种类繁多，非常全面，唯一遗憾是国外服务器，打开网速较慢</li>
<li>阿里 iconfont字库 <a href="http://www.iconfont.cn/" target="_blank"> http://www.iconfont.cn/</a> 推荐指数⭐⭐⭐⭐⭐<br>
    这个是阿里妈妈M2UX的一个iconfont字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用AI制作图标上传生成。重点是，免费！</li>
<a href="字体图标的使用.html" target="_blank">
    <h4>2.4字体图标的引入</h4>
</a>

<p>下载完毕之后，注意原先的文件不要删，后面会用</p>
<p>1.把下载包里面的fonts文件夹放入页面根目录下</p>
<p>2.在CSS样式中全局声明字体：简单理解把这些字体文件通过css引入到我们页面中。</p>
一定注意字体文件路径问题<br>
<div style="background-color:rgb(228, 240, 255);height: 350px;width: 600px;line-height: 2;">
    @font-face {<br>
    &nbsp;&nbsp;&nbsp;&nbsp;font-family: 'icomoon';<br>
    &nbsp;&nbsp;&nbsp;&nbsp;src: url('fonts/icomoon.eot?vyn5rn');<br>
    &nbsp;&nbsp;&nbsp;&nbsp;src: url('fonts/icomoon.eot?vyn5rn#iefix') format('embedded-opentype'),<br>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url('fonts/icomoon.ttf?vyn5rn') format('truetype'),<br>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url('fonts/icomoon.woff?vyn5rn') format('woff'),<br>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url('fonts/icomoon.svg?vyn5rn#icomoon') format('svg');<br>
    &nbsp;&nbsp;&nbsp;&nbsp;font-weight: normal;<br>
    &nbsp;&nbsp;&nbsp;&nbsp;font-style: normal;<br>
    &nbsp;&nbsp;&nbsp;&nbsp;font-display: block;<br>
    &nbsp;&nbsp;&nbsp;&nbsp;}</div>
<img src="img/字体图标.png" alt="">
<div style="background-color:rgb(228, 240, 255);height: 40px;width: 200px;line-height: 2;">
    &lt;span&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/span&gt;
</div>
<h4>2.5字体图标的追加</h4>
如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。<br>
把压缩包里的 selection.json 从新上传，然后选中自己想要的新图标，从新下载压缩包，并替换原来的文件即可
<a href="CSS三角.html" target="_blank"><h3>CSS三角</h3></a>
网页中常见的一些三角形，使用CSS直接画出来，不必做成图片或者字体图标。
<h3>4.CSS用户界面样式</h3>
<h4>4.1什么是界面样式</h4>
所谓界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。
<li>更改用户的鼠标样式</li>
<li>表单轮廓</li>
<li>防止表单域拖拽</li>
<a href="用户界面样式-鼠标样式.html" target="_blank"><h4>4.1鼠标样式 cursor</h4></a>
<div style="width: 200px; height: 30px; background-color:aquamarine;">
li {cursor:pointer; }
</div>
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。<br>
<img src="img/鼠标样式.png" alt="">
<a href="用户界面样式-表单轮廓和防止拖拽文本域.html" target="_blank"><h4>4.2轮廓线 outline</h4></a>
给表单添加 outline：0；或者 outline：none；样式之后，就可以去掉默认的蓝色边框
<h4>4.3防止拖拽文本域 resize</h4>
实际开发中，我们文本域右下角是不可以拖拽的
<div style="width: 200px; height: 30px; background-color:aquamarine;">textarea {resize：none；}</div>
<h3>5.vertical-align 属性应用</h3>
CSS的vertical-align属性应用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。<br>
官方解释：用于设置一个元素的垂直对齐方式，但是只针对于行内元素或者行内块元素有效
<div style="width: 500px; height: 30px; background-color:aquamarine;">vertical-align：baseline | top | middle | bottom</div>
<img src="img/vertical-align属性值.png" alt=""><br>
<img src="img/vertical-align图示.png" alt="">
<a href="图片文字居中对齐.html" target="_blank"><h4>5.1图片表单和文字对齐</h4></a>
图片、表单都属于行内块元素，默认的vertical-align是基线对齐<br>
此时可以给图片、表单这些行内块元素的vertical-align属性设置为middle 就可以让文字和图片垂直居中对齐
<a href="解决图片底部默认空白间隙问题.html" target="_blank"><h4>5.2解决图片底部默认空白间隙问题</h4></a>
bug：图片底侧会有一个空白间隙，原因是行内块元素和文字的基线对齐
<br>
1、给图片添加 vertical-align：middle | top | bottom等。(提倡使用第一种)<br>
2、把图片转换成块级元素 display：block；
<h3>6.溢出的文字省略号显示</h3>
<a href="单行文本溢出显示省略号.html"  target="_blank"> <h4>1.单行文本溢出显示省略号</h4></a>单行文本溢出显示省略号————必须满足三个条件<br>
<img src="img/溢出文字省略号条件.png" alt=""><br>
<a href="多行文本溢出显示省略号.html" target="_blank"><h4>2.多行文本溢出显示省略号</h4></a>多行文本溢出显示省略号，有较大的兼容性问题，适用于webKit浏览器或移动端（移动端大部分是webKit内核）<br>
<img src="img/多行文本溢出显示省略号.png" alt=""><br>
更推荐让后台人员做这个效果，因为后台人员可以设置显示多少个字，操作更简单
<h3>7.常见布局技巧</h3>
<a href="margin负值运用.html" target="_blank"><h4>1.margin负值运用</h4></a>
1.让每个盒子margin往左侧移动 -1px 正好压住相邻盒子边框<br>
2.鼠标经过某个盒子时候，提高当前盒子的层级（如果没有定位，则加相对定位（保留位置），如果有定位，则加z-index）
<a href="文字围绕浮动元素.html" target="_blank"><h4>2.文字围绕浮动元素</h4></a>
巧妙运用浮动元素不会压住文字的特性
<a href="行内块巧妙运用.html" target="_blank"><h4>3.行内块巧妙运用</h4></a>
页码在页面中间显示:
1. 把这些链接盒子转换为行内块，之后给父级指定 text-align:center;<br>
2. 利用行内块元素中间有缝隙，并且给父级添加 text-align:center; 行内块元素会水平会居中<br>









</body>

</html>